<template>
  <div style="margin-top: 10px">
    <a-table
        :columns="columns"
        :data-source="page.list"
        :pagination="pagination"
        @change="handleTableChange"
        bordered
    >
      <template #headerCell="{ column }">
        <template v-if="column.key === 'student_id'">
          <span>
            <smile-outlined/>
          </span>
        </template>
      </template>

      <template #visit_id="{ text }">
        <span>
          {{ text }}
        </span>
      </template>

      <template #student_id="{ text }">
        <span>
          <smile-outlined/>
          {{ text }}
        </span>
      </template>

      <template #start_time="{ record }">
        <span v-if="record.state === 1 || record.state === 2">
          <a-tag color="cyan">计划</a-tag>
          <a-tag>{{ record.plan_start_time }}</a-tag>
        </span>
        <span v-else>
          &emsp; &ensp;
          <a-tag>{{ record.start_time }}</a-tag>
        </span>
      </template>
      <template #end_time="{ record }">
        <span v-if="record.state === 1 || record.state === 2">
          <a-tag color="cyan">计划</a-tag>
          <a-tag>&ensp;{{ record.plan_end_time }}</a-tag>
        </span>
        <span v-else>
          <span v-if="record.state === 3 || record.state === 4">
            <check-circle-two-tone two-tone-color="#52c41a"/>
          </span>
          <span v-else>
            <warning-outlined/>
          </span>
          &ensp;
          <a-tag> {{ record.end_time }}</a-tag>
        </span>
      </template>
      <template #place="{ text }">
        <span>
          <a-tag>
          {{ text }}
          </a-tag>
        </span>
      </template>
      <template #count="{ text }">
        <span>
          <span style="font-family: 'Microsoft Yahei'">
          {{ text }}
          </span>
        </span>
      </template>
      <template #state="{ text }">
        <span>
          <b v-if="text === 1" style="color: lightgray">待咨询</b>
          <b v-if="text === 2" style="color: green"
          ><span><loading-outlined/></span>&emsp;正在咨询</b
          >
          <b v-if="text === 3" style="color: gray;">此次咨询已结束</b>
          <b v-if="text === 4" style="color: orange;">此心理咨询已结案</b>
          <b v-if="text === 5" style="color: red">对方已旷约</b>
          <b v-if="text === 6" style="color: paleturquoise">学生请假</b>
          <b v-if="text === 7" style="color: yellow">学生脱落</b>
        </span>
      </template>
      <template #action="{ record }">
        <span v-if="record.state === 1">尚不可操作</span>
        <a v-else-if="record.state === 2" @click="updateStatus(record)"
        >记录咨询情况</a
        >
        <a
            v-else-if="
            record.state === 3 ||
            record.state === 5 ||
            record.state === 6 ||
            record.state === 7
          "
            @click="checkDetail(record)"
        >查看详情</a
        >
        <span v-else-if="record.state === 4">
          <a-popover title="结案报告" trigger="hover">
            <template #content>
              <a
                  v-if="haveGotData"
                  :href="downloadHref"
                  :download="downloadFileName"
              >点击下载结案报告</a
              >
              <a v-else @click="getXlsxFile(false, record.visit_id)"
              >点击生成结案报告</a
              >
            </template>
            <a-button>结案报告</a-button>
          </a-popover>
        </span>
      </template>
    </a-table>
  </div>

  <a-modal
      v-model:visible="visibleModal1"
      title="登记结果"
      @ok="finishConsultRecord"
  >
    <a-form-item label="咨询结论&emsp;&emsp;">
      <a-select
          ref="select"
          v-model:value="finishConsultData.state"
          style="width: 120px"
      >
        <a-select-option value="3">
          <span
              class="selectOptions"
              style="color: green; font-family: Microsoft Yahei"
          >正常完成</span
          >
        </a-select-option>
        <a-select-option value="4">
          <span class="selectOptions" style="color: orange">已结案</span>
        </a-select-option>
        <a-select-option value="5">
          <span class="selectOptions" style="color: red">旷约</span>
        </a-select-option>
        <a-select-option value="6">
          <span class="selectOptions">请假</span>
        </a-select-option>
        <a-select-option value="7">
          <span class="selectOptions">脱落</span>
        </a-select-option>
      </a-select>
    </a-form-item>

    <a-form-item label="实际咨询时间">
      <a-time-picker
          v-model:value="finishConsultData.start_time"
          showNow="true"
          format="HH:mm"
      />
      <span>&emsp;至&emsp;</span>
      <a-time-picker
          v-model:value="finishConsultData.end_time"
          showNow="true"
          format="HH:mm"
      />
    </a-form-item>

    <a-form-item label="结论描述 &emsp;&ensp;">
      <a-textarea v-model:value="finishConsultData.comment"/>
    </a-form-item>
    <a></a>
  </a-modal>

  <a-modal v-model:visible="visibleModal2" title="咨询详情" @ok="exit">
    <br/>
    <a-card
        :title="
        checkData.student_id + '&ensp;第' + checkData.count + '次咨询详情'
      "
        style="width: 100%; height: 100%"
    >
      <template #extra></template>
      <b>{{ checkData.start_time }}</b>
      <span>&ensp; 至 &ensp; </span>
      <b>{{ checkData.end_time }}</b>
      <a-divider/>
      <br/>

      <p>{{ checkData.comment }}</p>
    </a-card>
  </a-modal>

  <!--  -->
</template>

<script setup>
////////////////////////////////////////////
import {reactive, ref} from "vue";
import {
  post,
  setLocalToken,
  get,
  del,
  getBlob,
  tip,
  removeLocalToken,
  getLocalToken,
} from "@/common";
import {useRouter} from "vue-router";
import dayjs from "dayjs";
import {message} from "ant-design-vue";
////////////////////////////////////////////
////////////////////////////////////////////
const currUser = ref({});
const getCurrUser = () => {
  get("/curr_user/get_curr-user", {}, {loading: false}).then((res) => {
    currUser.value = res.data;
    console.log("当前用户");
    console.log(currUser.value);
    // getAvatar();
    // getPage(pagination.current);
  });
};
// getCurrUser();

const downloadHref = ref("");
const downloadFileName = ref("");

const visibleModal1 = ref(false);
const finishConsultRecord = () => {
  finishConsultData.start_time = finishConsultData.start_time.format("HH:mm");
  finishConsultData.end_time = finishConsultData.end_time.format("HH:mm");
  console.log(
      "你选择的时间是 " +
      finishConsultData.start_time +
      "  " +
      finishConsultData.end_time
  );
  post("/consulter/consultRecord/update", finishConsultData).then((res) => {
    console.log(res.data);

    if (finishConsultData.state === "4") {
      getXlsxFile(true, finishConsultData.visit_id);
      visibleModal1.value = false;
      message.info("已生成结案报告，请下载");
    } else {
      visibleModal1.value = false;
      message.info(res.message);
    }
    finishConsultData.start_time = "";
    finishConsultData.end_time = "";
    finishConsultData.visit_id = "";
    finishConsultData.count = "";
    finishConsultData.state = "";
    finishConsultData.comment = "";
    finishConsultData.student_id = "";
    getPage(1);
  });
};
const haveGotData = ref(false);
const currentXlsxFile = ref("");

const getXlsxFile = (tag, visit_id) => {
  console.log("开始获取xlsx结案报告");
  // +"&last_comment="+finishConsultData.comment
  getBlob(
      "/consulter/consultRecord/getFile?visit_id=" + visit_id + "&tag=" + tag,
      {},
      {loading: false}
  ).then((blob) => {
    const reader = new FileReader();
    reader.addEventListener("load", () => {
      currentXlsxFile.value = reader.result;
    });
    reader.readAsDataURL(blob);
    downloadHref.value = URL.createObjectURL(blob);
    console.log(
        "wdnmd数据呢 " + finishConsultData.student_id + finishConsultData.visit_id
    );
    downloadFileName.value =
        finishConsultData.student_id +
        finishConsultData.visit_id +
        "结案报告.xls";
    haveGotData.value = true;
  });
};

const finishConsultData = reactive({
  student_id: "",
  visit_id: "",
  count: "",
  state: "",
  comment: "",
  start_time: "",
  end_time: "",
});

const updateStatus = (record) => {
  finishConsultData.student_id = record.student_id;
  finishConsultData.visit_id = record.visit_id;
  finishConsultData.count = record.count;
  visibleModal1.value = true;
};

const checkDetail = (record) => {
  checkData.start_time = record.start_time;
  checkData.end_time = record.end_time;
  checkData.comment = record.comment;
  checkData.student_id = record.student_id;
  checkData.count = record.count;
  visibleModal2.value = true;
};
const exit = () => {
  visibleModal2.value = false;
};

const checkData = reactive({
  student_id: "",
  count: "",
  start_time: "",
  end_time: "",
  comment: "",
});
const visibleModal2 = ref(false);

const page = ref({});
///////////////////////////////////////////
const pagination = reactive({
  current: 1, //当前页
  pageSize: 5, //每页记录数
  total: 0, //总记录数
  pageSizeOptions: ["2", "3", "5", "10", "20", "30", "100"], //每页记录下拉框的选型
  showSizeChanger: true, //是否展示每页记录数下拉框
  showQuickJumper: true, //是否展示快速跳转
  showTotal: (total, range) => {
    //展示总页数等文字说明信息的
    return (
        "共" +
        total +
        "条记录,当前第" +
        pagination.current +
        "页" +
        (range[1] - range[0] + 1) +
        "条记录"
    );
  },
});

const user = reactive({
  user_id: "",
});

const model = reactive({})
const getPage = (pageNum = 1) => {
  user.pageNum = pageNum;
  user.pageSize = pagination.pageSize;
  post("/consulter/consultRecord/getList", user).then((res) => {
    page.value = res.data; //将服务端传来的分页数据赋值予page

    //更新分页引擎
    pagination.current = page.value.current;
    pagination.pageSize = page.value.pageSize;
    pagination.total = page.value.total;

    console.log(res.data);
  });
};
getPage(1);

const handleTableChange = (pagi, filters, sorter, {currentDataSource}) => {
  pagination.current = pagi.current;
  pagination.pageSize = pagi.pageSize;
  pagination.total = pagi.total;

  getPage(pagination.current);
};

const columns = [
  {
    dataIndex: "visit_id", //
    title: "项目ID",
    slots: {
      customRender: "visit_id",
    },
  },
  // {
  //   dataIndex: "duty_id", //
  //   title: "值班ID",
  //   slots: {
  //     customRender: "duty_id",
  //   },
  // },
  {
    dataIndex: "student_id", //
    title: "学生",
    slots: {
      customRender: "student_id",
    },
  },
  {
    key: "start_time", //
    title: "开始时间",
    slots: {
      customRender: "start_time",
    },
  },
  {
    key: "end_time", //
    title: "结束时间",
    slots: {
      customRender: "end_time",
    },
  },
  {
    dataIndex: "place", //
    title: "咨询地点",
    slots: {
      customRender: "place",
    },
  },
  {
    dataIndex: "count", //
    title: "咨询阶段",
    slots: {
      customRender: "count",
    },
  },
  {
    dataIndex: "state", //
    title: "状态",
    slots: {
      customRender: "state",
    },
  },
  // {
  //   dataIndex: "comment", //
  //   title: "结论",
  //   slots: {
  //     customRender: "comment",
  //   },
  // },

  {
    title: "操作",
    key: "action",
    slots: {
      customRender: "action",
    },
  },
];

////////////////////////////////////////////
</script>

<style>
.selectOptions {
  font-family: "Microsoft Yahei";
}
</style>